import React from 'react';
import {
  Grid,
  Paper,
  Typography,
  Box,
} from '@mui/material';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import CommentIcon from '@mui/icons-material/Comment';
import FavoriteIcon from '@mui/icons-material/Favorite';
import PeopleIcon from '@mui/icons-material/People';

interface StatsOverviewProps {
  stats: {
    gamesCount: number;
    totalPlayTime: string;
    reviewsCount: number;
    favoritesCount: number;
    friendsCount: number;
  };
}

const StatCard: React.FC<{
  icon: React.ReactNode;
  label: string;
  value: string | number;
}> = ({ icon, label, value }) => (
  <Paper
    sx={{
      p: 2,
      height: '100%',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      textAlign: 'center',
      transition: 'transform 0.2s',
      '&:hover': {
        transform: 'translateY(-4px)',
        bgcolor: 'action.hover',
      },
    }}
  >
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: 48,
        height: 48,
        borderRadius: '50%',
        bgcolor: 'primary.main',
        color: 'primary.contrastText',
        mb: 1,
      }}
    >
      {icon}
    </Box>
    <Typography variant="h4" component="div" gutterBottom>
      {value}
    </Typography>
    <Typography color="text.secondary" variant="body2">
      {label}
    </Typography>
  </Paper>
);

const StatsOverview: React.FC<StatsOverviewProps> = ({ stats }) => {
  return (
    <Grid container spacing={3} sx={{ mb: 4 }}>
      <Grid item xs={6} sm={4} md={2.4}>
        <StatCard
          icon={<SportsEsportsIcon />}
          label="游戏库"
          value={stats.gamesCount}
        />
      </Grid>
      <Grid item xs={6} sm={4} md={2.4}>
        <StatCard
          icon={<AccessTimeIcon />}
          label="总游戏时长"
          value={stats.totalPlayTime}
        />
      </Grid>
      <Grid item xs={6} sm={4} md={2.4}>
        <StatCard
          icon={<CommentIcon />}
          label="评论"
          value={stats.reviewsCount}
        />
      </Grid>
      <Grid item xs={6} sm={4} md={2.4}>
        <StatCard
          icon={<FavoriteIcon />}
          label="收藏"
          value={stats.favoritesCount}
        />
      </Grid>
      <Grid item xs={6} sm={4} md={2.4}>
        <StatCard
          icon={<PeopleIcon />}
          label="好友"
          value={stats.friendsCount}
        />
      </Grid>
    </Grid>
  );
};

export default StatsOverview;
